import react from 'react'
// 红绿灯-异步效果展示
/**
 * @name 效果分析
 * red:    2
 * green:  3
 * yellow: 1
 *
 * 依次亮起：异步要排队
 *
 * 循环往复：递归循环
 *
 * 如何处理异步效果：四种方案
 * 1. 回调函数
 * 2. promise
 * 3. *
 * 4. async 终极解决方案
 *
 *
 */

// function auto(time = 1000, func: (flag: boolean) => void) {
//   setTimeout(() => {
//     // 在异步中，通知，该下一个亮了
//     func(true)
//   }, time)
// }

// // 回调地狱
// function callfunc() {
//   auto(2000, function (res) {
//     console.log('红灯亮')
//     auto(3000, (res) => {
//       console.log('绿灯亮')
//       auto(1000, (res) => {
//         console.log('黄灯亮')
//         // console.log('黄灯开始亮')
//         callfunc()
//       })
//     })
//   })
// }

// callfunc()

/**
 * @name Promise
 *
 */
function auto(time = 1000) {
  return new Promise<boolean>((resolve, reject) => {
    setTimeout(() => {
      resolve(true)
    }, time)
  })
}

// function callfunc() {
//   auto(2000)
//     .then((res) => {
//       console.log('红灯亮')
//       return auto(3000)
//     })
//     .then((res) => {
//       console.log('绿灯亮')
//       return auto(1000)
//     })
//     .then((res) => {
//       console.log('黄灯亮')
//       callfunc()
//     })
// }

async function callfunc() {
  console.log('红灯亮')
  await auto(2000)
  console.log('绿灯亮')
  await auto(3000)
  console.log('黄灯亮')
  await auto(1000)
  callfunc()
}
// callfunc()

const Demo = () => {
  return <div>demo</div>
}

export default Demo
